<template>
    <el-dialog v-model="dialogShow" title="查看" :width="dialogWidth" center @close="closeHandle">
        <el-descriptions border title="详情信息" direction="vertical" :column="3">
            <el-descriptions-item label="名称">{{ state.form.title }}</el-descriptions-item>
            <el-descriptions-item label="路由">{{ state.form.path }}</el-descriptions-item>
            <el-descriptions-item label="状态">
                <el-tag size="small" v-if="state.form.active">激活</el-tag>
                <el-tag size="small" v-else>禁用</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="组件">{{ state.form.component }}</el-descriptions-item>
            <el-descriptions-item label="类型">
                <el-tag size="small" v-if="state.form.type == 0">菜单</el-tag>
                <el-tag size="small" type="success" v-if="state.form.type == 1">按钮</el-tag>
                <el-tag size="small" type="warning" v-if="state.form.type == 2">外链</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="隐藏">
                <el-tag size="small" v-if="state.form.hidden">隐藏</el-tag>
                <el-tag size="small" v-else>显示</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="重定向">{{ state.form.redirect }}</el-descriptions-item>
            <el-descriptions-item label="排序">{{ state.form.sort }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { dialogAutoWidth } from '@/utils/dialog'

const props = defineProps({
    dialogShow: {
        require: true,
        default: false,
        type: Boolean,
    },
    data: {
        require: true,
        default: () => { },
        type: Object,
    }
})

// 自动宽度
let dialogWidth = ref("30%")
dialogWidth.value = dialogAutoWidth;

let state = reactive<any>({
    form: {
        id: null,
        tenantName: "",
        tenantDesc: "",
        tenantCode: "",
        active: true,
        parentId: null,
    },
})

watch(() => props.data, () => {
    state.form = props.data;
}, { deep: true, immediate: true })

const emits = defineEmits(['close'])
const closeHandle = () => {
    emits('close', false);
}

</script>

<style lang="less" scoped>
</style>